@use '@toms/element-ui/theme-chalk/src/mixins/mixins' as *;

.el-tabs {
  --tabs-number-color: var(--color-blue-9);
  --tabs-number-background-color: var(--color-geekblue-1);
}

@include b(tabs) {
  @include e(header) {
    margin: 0 0 8px;
  }

  @include e(item) {
    height: 46px;
    line-height: 46px;
    min-width: 70px;
    padding: 0px 10px;
    text-align: center;
    @include when(active) {
      @include e(number) {
        color: var(--tabs-number-color);
        background-color: var(--tabs-number-background-color);
      }
    }
  }
  @include m(card) {
    > .el-tabs__header .el-tabs__item {
      border-bottom: 1px solid transparent;
      border-left: 1px solid var(--el-border-color-light);
      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
        padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      padding-left: 10px;
      &:first-child {
        border-left: none;
        padding-left: 10px;
      }
      &.is-closable {
        &:hover {
          padding-left: 13px;
          padding-right: 13px;

          & .el-icon-close {
            width: 14px;
          }
        }
      }
    }
  }
  @include m((top, bottom)) {
    .el-tabs__item.is-top:nth-child(2),
    .el-tabs__item.is-bottom:nth-child(2) {
      padding-left: 0;
    }
    .el-tabs__item.is-top:last-child,
    .el-tabs__item.is-bottom:last-child {
      padding-right: 0;
    }

    &.el-tabs--border-card,
    &.el-tabs--card,
    .el-tabs--left,
    .el-tabs--right {
      > .el-tabs__header {
        .el-tabs__item:nth-child(2) {
          padding-left: 10px;
        }
        .el-tabs__item:last-child {
          padding-right: 10px;
        }
      }
    }
  }
  @include e(number) {
    padding: 0 6px;
    margin-left: 8px;
    font-size: var(--font-size-small);
    border-radius: 15px;
    color: var(--color-gray-7);
    background-color: var(--color-gray-4);
    font-weight: 400;
  }

  @include e(nav-wrap) {
    &::after {
      height: 1px;
      background-color: var(--divider-color);
    }
  }
}